<!-- 
  顶部菜单页面
 -->
<template>
  <div style="width: 100%">
    <table style="width: 100%; background-color: #346cb0">
      <tr>
        <td style="width: 200px; color: white">
          {{ $store.state.title }}  <!-- 取自store/index.js中的值 -->
        </td>
        <td>
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#346cb0"
            text-color="#fff"
            active-text-color="#fff"
          >
            <el-menu-item
              v-for="tab in obj.tabs"
              :key="tab.children"
              :index="tab.id"
              :class="tab.id"
              @click="sendMenu(tab.children)"
            >
              <span style="font-size: 18px">{{ tab.name }} </span>
            </el-menu-item>
          </el-menu>
        </td>

        <td align="right">
          <el-dropdown>
            <span
              class="el-dropdown-link"
              style="color: white; padding-right: 40px"
            >
              用户名<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";

export default {
  //下面的注释不要删
  // eslint-disable-next-line no-unused-vars
  setup(props, { attrs, slots, emit }) {
    //obj.tabs 为菜单数组数据 {一级菜单 -> 二级菜单 -> 按钮} 根据需求组合数据与页面菜单、按钮
    const obj = reactive({
      tabs: [
        {
          id: "1",
          name: "系统设置",
          children: [
            {
              id: "1-1",
              name: "菜单管理",
              target: "user/list",
              buttons: [
                {
                  id: "b1",
                  name: "新增",
                  type: "primary",
                  fun: "save",
                },
                {
                  id: "b2",
                  name: "修改",
                  type: "warning",
                  fun: "edit",
                },
                {
                  id: "b3",
                  name: "删除",
                  type: "danger",
                  fun: "del",
                },
              ],
            },
          ],
        },
        {
          id: "2",
          name: "哈哈哈",
          children: [
            {
              id: "2-1",
              name: "哈喽",
              target: "About",
              buttons: [
                {
                  id: "b1",
                  name: "测试",
                  type: "primary",
                  fun: "save",
                },
                {
                  id: "b2",
                  name: "大姐",
                  type: "warning",
                  fun: "edit",
                },
              ],
            },
          ],
        },
      ],
    });

    //点击菜单时触发，对应 views/Home 中的getMenu事件
    const sendMenu = (data) => {
      emit("getMenu", data);
    };

    return {
      obj,
      sendMenu,
    };

  },
  mounted() { //加载完成后自动执行此方法，模拟点击第一个菜单
      this.$nextTick(function () {
      this.sendMenu(this.obj.tabs[0].children);
    });
  },
};
</script>

<style scope>
/**.el-menu.el-menu--horizontal 覆盖el原有的 header 下的边框 */
.el-menu.el-menu--horizontal { 
  border-bottom: solid 0px var(--el-menu-border-color) !important;
}
</style>